<template>
    <div class="card">
        <div class="cartitem">
            <span class="top">门店总数</span>
            <span class="bom">555</span>
        </div>
        <div class="cartitem">
            <span class="top">统计金额</span>
            <span class="bom">555</span>
        </div>
        <div class="cartitem">
            <span class="top">已成交订单</span>
            <span class="bom">555</span>
        </div>
        <div class="cartitem">
            <span class="top">新增会员</span>
            <span class="bom">555</span>
        </div>
        <div class="cartitem">
            <span class="top">代发货订单量</span>
            <span class="bom">555</span>
        </div>
    </div>
</template>
<script>
export default {
    props:{
      cardlist:{
          type:Array,
           default:()=>{
               return  ['门店总数','统计金额','已成交订单','新增会员','代发货订单']
           }
      }
    },
    data(){
        return {

        }
    }
    
}
</script>
<style lang="less" scoped>
.card {
    width: 100%;
    display: flex;
    .cartitem {
        overflow: hidden;
        background-image: url('~@/assets/css/yingxiao/矢量智能对象.png'); 
        background-size: 100% 100%;
        background-repeat:no-repeat;
        border-radius: 12px;
        color: #fff;
        padding-left: 15px;
        display: flex;
        flex-direction: column;
        margin-right: 2%;
        flex: 1;
        height: 150px;
          &:nth-of-type(5){
                margin-right: 0;
                }
        .top {
            display: flex;
            flex: 60%;
            flex-direction: column;
            justify-content: flex-end;
        }
        .bom {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            flex: 30%;
            font-weight: 900;
            font-size: 24px;
        }
    }
    & .cartitem:nth-last-of-type(4) {
    background-image: url('~@/assets/css/yingxiao/矢量智能对象(1).png')!important; 
    }
      & .cartitem:nth-last-of-type(3) {
    background-image: url('~@/assets/css/yingxiao/矢量智能对象(2).png')!important; 
    }
       & .cartitem:nth-last-of-type(2) {
    background-image: url('~@/assets/css/yingxiao/矢量智能对象(3).png')!important; 
    }
       & .cartitem:nth-last-of-type(1) {
    background-image: url('~@/assets/css/yingxiao/矢量智能对象(4).png')!important; 
    }
}
</style>